
<template>
  <div class="detail">
    <el-button class="goBack" @click="gouBackHome" style="position:absolute;top:180px;right: 30px " type="info">返回首页</el-button>
    <div class="detail-content">
        <img :src="product.url" style="position: relative ;left: -500px;" />
        <h2 style="position: relative;left:300px;top: -600px">{{ product.title }}</h2>
      <hr style="position: relative;left:300px;top: -590px">
      <p style="position: relative;left:70px;top: -580px"><b>销量:{{product.saleCount}}</b></p>
        <p style="position: relative;left:100px;top: -560px ;font-size: 25px"><b>价格：￥{{ product.price }}</b></p>
      <p style="position: relative;left:220px;top: -610px ;color: red"><s>原价:{{product.oldPrice}}</s></p>
<!--      <img src="123456.png" style="width: 200px;height: 200px;position: relative ;top: -500px;left: 280px"/>-->
<!--      <img src="1234567.png" style="width: 200px;height: 200px ;position: relative ;top: -500px;left: 310px"/>-->
<!--      <img src="12345678.png" style="width: 200px;height: 200px;position: relative ;top: -500px;left: 340px"/>-->
      <img src="123456.png" style="width: 200px;height: 200px;position: absolute ;top: 500px;left: 980px"/>
        <img src="1234567.png" style="width: 200px;height: 200px ;position: absolute ;top: 500px;left: 1200px"/>
      <img src="12345678.png" style="width: 200px;height: 200px;position:absolute ;top: 500px;left: 1420px"/>
        <p style="width: 200px;height: 200px;position: absolute ;top: 720px;left: 980px">扫码购买</p>
        <p style="width: 200px;height: 200px ;position: absolute ;top: 720px;left: 1200px">扫码购买</p>
        <p style="width: 200px;height: 200px;position: absolute ;top: 720px;left: 1420px">扫码购买</p>



    </div>
  </div>
</template>
<script>
export default {
  name: 'InformationView',
  data () {
    return {
      product: {}
    };
  },
  methods: {
    gouBackHome () {
      this.$router.push('/');
    }
  },
  created () {
    const productId = this.$route.query.id;
    // 模拟通过ID获取商品数据
    const products = [
      {id: 1,title: "森马牛仔裤女宽松慢跑裤运动风2022春季新款", price: 233, oldPrice: 598, url: "/imgs/a.jpg", saleCount: 2342},
      {
        id:2,title: "茵曼马甲连衣裙两件套春季新款娃娃领色织格长袖背心裙套装",
        price: 233,
        oldPrice: 598,
        url: "/imgs/b.jpg",
        saleCount: 2342
      },
      {id:3,
        title: "雪中飞墨绿色短袖t恤女夏2022新款纯棉半袖打底体恤夏季",
        price: 233,
        oldPrice: 598,
        url: "/imgs/c.jpg",
        saleCount: 2342
      },
      {id:4,
        title: "【佟丽娅同款】鸭鸭明星同款羽绒服2021年冬季新款时尚",
        price: 233,
        oldPrice: 598,
        url: "/imgs/d.jpg",
        saleCount: 2342
      },
      {id:5,
        title: "BEASTER小恶魔鬼脸明星同款夹克毛绒保暖加厚字母印花",
        price: 233,
        oldPrice: 598,
        url: "/imgs/e.jpg",
        saleCount: 2342
      },
      {id:6,
        title: "香影毛呢外套女中长款2021年冬季新款气质韩版娃娃领",
        price: 233,
        oldPrice: 598,
        url: "/imgs/f.jpg",
        saleCount: 2342
      },
      {id:7,
        title: "SEMIR森马商场同款打底针织毛衣纯色高领新品显瘦",
        price: 233,
        oldPrice: 598,
        url: "/imgs/g.jpg",
        saleCount: 2342
      },
      {id:8,title: "美特斯邦威女MTEE 贺岁系列中长款风衣736598", price: 233, oldPrice: 598, url: "/imgs/h.jpg", saleCount: 2342},
      {id:9,
        title: "imone2021秋款黑色小西装外套女韩版学生宽松学",
        price: 233,
        oldPrice: 598,
        url: "/imgs/i.jpg",
        saleCount: 2342
      },
      {id:10,
        title: "BEASTER 小恶魔明星同款保暖长袖街头潮流连帽卫",
        price: 233,
        oldPrice: 598,
        url: "/imgs/j.jpg",
        saleCount: 2342
      },
      {id:11,
        title: "憨厚皇后100%绵羊皮2021秋海宁真皮皮衣女长款修",
        price: 233,
        oldPrice: 598,
        url: "/imgs/k.jpg",
        saleCount: 2342
      },
      {id:12,
        title: "美特斯邦威高腰牛仔裤女宽松小脚新款春秋彩色",
        price: 233,
        oldPrice: 598,
        url: "/imgs/l.jpg",
        saleCount: 2342
      },
      {id: 13,title: "森马牛仔裤女宽松慢跑裤运动风2022春季新款", price: 233, oldPrice: 598, url: "/imgs/a.jpg", saleCount: 2342},
      {
        id:14,title: "茵曼马甲连衣裙两件套春季新款娃娃领色织格长袖背心裙套装",
        price: 233,
        oldPrice: 598,
        url: "/imgs/b.jpg",
        saleCount: 2342
      },
      {id:15,
        title: "雪中飞墨绿色短袖t恤女夏2022新款纯棉半袖打底体恤夏季",
        price: 233,
        oldPrice: 598,
        url: "/imgs/c.jpg",
        saleCount: 2342
      },
      {id:16,
        title: "【佟丽娅同款】鸭鸭明星同款羽绒服2021年冬季新款时尚",
        price: 233,
        oldPrice: 598,
        url: "/imgs/d.jpg",
        saleCount: 2342
      },
      {id:17,
        title: "BEASTER小恶魔鬼脸明星同款夹克毛绒保暖加厚字母印花",
        price: 233,
        oldPrice: 598,
        url: "/imgs/e.jpg",
        saleCount: 2342
      },
      {id:18,
        title: "香影毛呢外套女中长款2021年冬季新款气质韩版娃娃领",
        price: 233,
        oldPrice: 598,
        url: "/imgs/f.jpg",
        saleCount: 2342
      },
      {id:19,
        title: "SEMIR森马商场同款打底针织毛衣纯色高领新品显瘦",
        price: 233,
        oldPrice: 598,
        url: "/imgs/g.jpg",
        saleCount: 2342
      },
      {id:20,title: "美特斯邦威女MTEE 贺岁系列中长款风衣736598", price: 233, oldPrice: 598, url: "/imgs/h.jpg", saleCount: 2342},
      {id:21,
        title: "imone2021秋款黑色小西装外套女韩版学生宽松学",
        price: 233,
        oldPrice: 598,
        url: "/imgs/i.jpg",
        saleCount: 2342
      },
      {id:22,
        title: "BEASTER 小恶魔明星同款保暖长袖街头潮流连帽卫",
        price: 233,
        oldPrice: 598,
        url: "/imgs/j.jpg",
        saleCount: 2342
      },
      {id:23,
        title: "憨厚皇后100%绵羊皮2021秋海宁真皮皮衣女长款修",
        price: 233,
        oldPrice: 598,
        url: "/imgs/k.jpg",
        saleCount: 2342
      },
      {id:24,
        title: "美特斯邦威高腰牛仔裤女宽松小脚新款春秋彩色",
        price: 233,
        oldPrice: 598,
        url: "/imgs/l.jpg",
        saleCount: 2342}];

    this.product = products.find(item => item.id == productId);
  }
};
</script>

<style scoped>
.goBack {
  cursor: pointer;
}
.detail {
  text-align: center;
  padding: 20px;
}

.detail-content {
  max-width: 600px;
  margin: 0 auto;
  margin-top: 30px;
}

.detail-content img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.detail-content h2 {
  margin-top: 20px;
  font-size: 24px;
}

.detail-content p {
  margin-top: 20px;
  font-size: 16px;
  color: #777;
}
</style>